﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>SubtractJS</title>
    <link rel="stylesheet" href="css/subtractjs.css" />
    <link rel="stylesheet" href="css/colors.css" />
    <script type="text/javascript" src="Scripts/jQuery-2.0.3.min.js"></script>
    <script type="text/javascript" src="Scripts/Subtract.min.js"></script>
    <script type="text/javascript" src="Scripts/SubtractJSDocumentation.min.js"></script>
    <style type="text/css">
        html, body {
            min-width: 646px;
            min-height: 725px;
        }
        .defaultPreviewPageBody {
            background: white;
            border: 2px solid black;
            margin: 25px;
            margin-top: 2px;
            color: black;
            overflow: hidden;
        }

        .preview {
            display: none;
        }
    </style>
    <style id="swappableStyleSheet" type="text/css">
    </style>
</head>
<body>
    <div id="headerFooterSample" class="preview">
        <div class="sj-fill-top previewSection previewHeader">Example, Inc</div>
        <div class="sj-fill previewSection previewBody">
            <b>SubtractJS</b> treats the screen or parent element as a rectangle to be "subtracted" from.  Initially, the rectangle
            is the size of the whole screen or parent element.  Then the first element is subtracted from it.  For example, say you specified
            "sj-fill-left" on an element.<br />
            <br />
            <ul class="previewList">
                <li>SubtractJS would look at the size of the screen and configure the height of your element to be 100% of the screen height.</li>
                <li>The location would be set of your element to be set to the upper left corner of the screen.</li>
                <li>SubtractJS subtracts the width of your element from the left side of the screen rectangle.</li>
            </ul>

        </div>
        <div class="sj-fill-bottom previewSection previewFooter">
            &copy; 2119 Example, Inc<br />
            Office: 402-555-9865<br />
            123 Any St<br />
            Anytown, NE 68555<br />
        </div>
    </div>
    <div id="leftRightSample" class="preview">
        <div class="sj-fill-left previewSection previewLeft">
            Example, Inc<br />
            <ul>
                <li>Home</li>
                <li>About Us</li>
                <li>Contact Us</li>
            </ul>
        </div>
        <div class="sj-fill previewSection previewBody"><b>Lorem ipsum</b> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
        <div class="sj-fill-right previewSection previewRight">
            &copy; 2119 Example, Inc<br />
            Office: 402-555-9865<br />
            123 Any St<br />
            Anytown, NE 68555<br />
        </div>
    </div>
    <div id="headerFooterMenuSample" class="preview">
        <div class="sj-fill-top previewSection previewHeader">Example, Inc</div>
        <div class="sj-fill previewSection previewBody"><b>Lorem ipsum</b> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
        <div class="sj-fill-bottom previewSection previewFooter">
            &copy; 2119 Example, Inc<br />
            Office: 402-555-9865<br />
            123 Any St<br />
            Anytown, NE 68555<br />
        </div>
        <div class="sj-fill-left previewSection previewMenu">
            Example, Inc<br />
            <ul>
                <li>Home</li>
                <li>About Us</li>
                <li>Contact Us</li>
            </ul>
        </div>
    </div>
    <form action="#">
        <div class="sj-fill-top header screenSection fancyblue">
            <div>
                <img class="subtractLogo" src="Images/subtract-logo.png" />
                SubtractJS
            </div>
        </div>
        <div class="sj-fill-top menubar">&nbsp;</div>
        <div id="leftMenu" class="sj-fill-left screenSection">
            <div class="sj-fill-top sectionHeader">HTML Examples</div>
            <div class="sj-fill sectionBody">
                <ul class="exampleList">
                    <li>
                        <a id="headerFooter" href="#" class="previewLink">Header and Footer</a>
                    </li>
                    <li>
                        <a id="leftRight" href="#" class="previewLink">Left and Right</a>
                    </li>
                    <li>
                        <a id="headerFooterMenu" class="previewLink" href="#">Header, Footer, Left Menu</a>
                    </li>
                </ul>
                <br />
                Select a Style
                <select id="cssSelect">
                    <option value="Square">Square / Margins</option>
                    <option value="SquareNoBorder">Square No Borders</option>
                    <option value="Rounded">Rounded</option>
                </select>
                <br /><br /><br />
                Download the CSS<br />
                <span style="font-size: .8em;">
                    Use the links below to download the style sheet that is being applied via the dropdown above.
                </span>
                <br />
                <ul class="exampleList">
                    <li><a href="css/StyleSheetSquare.css">Square / Margins</a></li>
                    <li><a href="css/StyleSheetSquareNoBorder.css">Square No Borders</a></li>
                    <li><a href="css/StyleSheetRounded.css">Rounded</a></li>
                </ul>
            </div>

        </div>
        <div class="sj-fill-top screenSection htmlEditor">
            <div class="sj-fill-top sectionHeader">
                HTML Editor
                <button id="updateHtml" type="button" style="float: right;">Update Preview</button>
            </div>
            <textarea id="htmlCode" class="sj-fill htmlEditorBody"></textarea>
        </div>
        <div id="previewSection" class="sj-fill screenSection fancyblue2">
            <div class="sj-fill-top sectionHeader" style="color: black;">
                Auto-Resizable Web Site Preview
            </div>
            <div id="previewArea" class="sj-fill defaultPreviewPageBody previewPageBody"></div>
        </div>
    </form>
    <script src="Scripts/Preview.min.js" type="text/javascript"></script>
</body>
</html>
